<template><!--注册页面-->
    <div class="login">

        <div class="login-form" style="height: 540px">

            <el-form class="demo-ruleForm" :model="ruleForm" :rules="rules" ref="ruleForm">

                <div class="login-header"><p>注册账号</p></div>

                <el-form-item prop="nickname">
                    <el-input placeholder="昵称" v-model="ruleForm.nickname"></el-input>
                </el-form-item>

                <el-form-item prop="phone">
                    <el-input placeholder="手机号" v-model="ruleForm.phone"></el-input>
                </el-form-item>

                <el-form-item prop="payPassword">
                    <el-input placeholder="支付密码" type="password" v-model="ruleForm.payPassword"></el-input>
                </el-form-item>
                <el-form-item prop="isPayPassword">
                    <el-input placeholder="确认密码" type="password" v-model="ruleForm.isPayPassword"></el-input>
                </el-form-item>

                <el-form-item prop="code">
                    <el-input placeholder="验证码" v-model="ruleForm.code" @keyup.native.enter="Register('ruleForm')">
                        <el-button slot="append" :class="{disabled: !this.canClick}"
                                   @click.native="getCode(ruleForm.phone)">{{content}}
                        </el-button>
                    </el-input>
                </el-form-item>

                <el-checkbox v-model="checked" style="margin-bottom: 18px">我已阅读并同意<a v-on:click="UserAgreement()">《用户协议》</a></el-checkbox>

                <el-button type="primary" :loading="loginLoading" v-if="checked" style="width: 100%;margin-bottom: 18px"
                           @click.native="Register('ruleForm')">注册
                </el-button>
                <el-button type="primary" :loading="loginLoading" v-if="!checked"
                           style="width: 100%;margin-bottom: 18px"
                           disabled>注册
                </el-button>

            </el-form>
        </div>

    </div>
</template>

<script>

    import {FillerRieldRules, PhoneIsCheck, Required} from '../../utils/dataVerify'

    export default {
        data() {
            return {
                ruleForm: {
                    nickname: '',
                    phone: '',
                    code: '',
                    payPassword: '',
                    isPayPassword: ''
                },
                checked: false, //  我已阅读并同意
                loginLoading: false,
                content: '发送验证码',  // 按钮里显示的内容
                totalTime: 60,      //  记录具体倒计时时间
                canClick: true,     //  重新开启短信按钮
                rules: {
                    ...FillerRieldRules(['phone'], PhoneIsCheck),
                    ...FillerRieldRules(['code', 'payPassword', 'isPayPassword', 'nickname'], Required),
                },
            }
        },
        computed: {
            WSLogin() { //  登录后回调

            },
            ISLogin() { //  判断 socket 是否登录

            }
        },
        watch: {    // 如果路由有变化，会再次执行该方法
            WSLogin: function (next, prev) {

            },
            ISLogin: function (next, prev) {    //  发送 浏览器token

            }
        },
        methods: {
            UserAgreement() {

            },
            getCode(phone) {    //  获取验证码


            },
            Register(formName) {    //  注册信息校验

            },
        }
    }
</script>

<style lang="scss">

    .disabled {
        background-color: #ddd;
        border-color: #ddd;
        color: #57a3f3;
        cursor: not-allowed; // 鼠标变化
    }

    .login {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
        background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571376976132&di=21e4d2cd53b617d42cf15ae4e6022fac&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F88%2F72%2F6857d6a4bfe356e.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        background-position: center;


        //background-color: #4498c4;
        .login-form {
            width: 375px;
            padding: 30px;
            background-color: white;
            text-align: left;
            border-radius: 4px;
            position: relative;
            margin-left: 0;
            margin-right: 0;
            margin-top: 50px;
            margin-bottom: 250px;
            zoom: 1;
            display: block;

            .login-header {
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                margin-top: 40px;
                margin-bottom: 60px;
            }
        }
    }
</style>
